// import React from 'react';
import React from './ireact/react';
// import ReactDOM from 'react-dom';
import ReactDOM from './ireact/react-dom';

//React元素不仅可以是DOM标签, 还可以是用户自定义的组件
//1. 自定义组件的名称应该是首字母大写的
//2. 原生组件小写开头, 自定义组件大写字母开头
/*function Welcome(props){
  return <h1>Hello,{props.name}</h1>;
}

console.log('Welcome:',Welcome);*/
/*
Welcome: ƒ Welcome(props) {
    return react_1.default.createElement("h1", null,
        "Hello,",
        props.name);
}
*/
/*ReactDOM.render(<Welcome name={'ahhh'}/>, document.getElementById('root'));*/


function FunctionComponent(props){
  return (
    <div className="title" style={{backgroundColor: 'green', color: 'red'}}>
      <span>{props.name}</span>
      {props.children}
    </div>
  );
}

ReactDOM.render((
  <FunctionComponent name={'ahhh'}>
    <span>world</span>
  </FunctionComponent>
), document.getElementById('root'));
